<template>
	<page-meta>
		<navigation-bar :title="nbTitle" :subtitle-color="nbFrontColor" :loading="nbLoading" :front-color="nbFrontColor"
			:background-color="nbBackgroundColor" />
	</page-meta>
	<view>

		<view class="example">
			<view class="title">
				校长信箱
			</view>
			<view class="" style="color: #ababab;">
				你的意见和投诉都可以向我诉说
			</view>
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms :rules="rules" ref="adviceForm" :modelValue="adviceFormData">
				<uni-forms-item label="标题" required name="feedbackTitle" labelWidth="100rpx">

				</uni-forms-item>
				<uni-easyinput v-model="adviceFormData.feedbackTitle" placeholder="请输入标题" />
				<uni-forms-item label="描述一下您的建议/投诉" name="feedbackContent" labelWidth="500rpx">

				</uni-forms-item>
				<uni-easyinput type="textarea" v-model="adviceFormData.feedbackContent" placeholder="请输入问题内容" />
				</uni-forms-item>
				<uni-forms-item label="图片上传" labelWidth="100rpx">
					<view class="img-box flex flex-wrap">
						<view class="img" v-for="(item, index) in adviceFormData.imgList">
							<image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image>
							<image @click="delImg(index)" class="close" src="/static/images/close.png"
								mode="aspectFill"></image>
						</view>
						<!-- 上传按钮 -->
						<view class="img upload flex-center" @click="uploadImg">
							<image class="add-pic" src="/static/images/upload.png" mode="aspectFill"></image>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button class="btn" @click="onSubmit()">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import {
		UpdateMyAdvice,
		getSelectAdviceById,
		deleteImage
	} from '@/api/advice/advice.js'
	export default {
		name: "submit-advice",
		data() {
			return {
				adviceFormData: {
					id: '',
					feedbackId: '',
					feedbackTitle: '',
					feedbackContent: '',
					imgList: [], //图片
					feedbackPhoto: '',
				},
				nbTitle: '校长信箱',
				nbLoading: false,
				nbFrontColor: '#ffffff',
				nbBackgroundColor: '#f7cb50',
				range: [],
				index: [0, 0],
				imgMaxNum: 9,
				rules: {
					feedbackTitle: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					feedbackContent: {
						rules: [{
							required: true,
							errorMessage: '建议/投诉不能为空'
						}]
					},
				}
			};
		},
		methods: {
			onSubmit() {
				uni.showModal({
					title: '提交',
					content: '是否确定修改信息',
					success: (res) => {
						if (res.confirm) {
							this.$refs.adviceForm.validate(['adviceTitle'], (err, formData) => {
								if (!err) {
									this.adviceFormData.feedbackPhoto = this.adviceFormData.imgList
										.toString()
									UpdateMyAdvice(this.adviceFormData).then(res => {
										uni.showToast({
											title: '提交成功',
											duration: 2000
										});
									})
									uni.navigateBack({
										delta: 1,
										success: () => {
											const pages =
												getCurrentPages() // 获取当前页面栈数组，第一个元素为首页，最后一个元素为当前页面
											let page = pages[0] // 要返回到的页面，超过页面栈，则为首页
											page.AdviceList = []
											page.MyAdviceList = []
										}
									})
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			//上传图片
			uploadImg: function() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						if (that.adviceFormData.imgList.length + tempFilePaths.length > that.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							});
						} else {
							//多图上传
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								//显示消息提示框
								//上传逻辑
								uni.uploadFile({

									// url: 'https://hjhhapi.liwinds.online/system/oss/uploadApp',
									// url: 'http://192.168.3.36:8080/system/oss/uploadApp',
									url: 'http://localhost:8080/system/oss/uploadApp',
									filePath: tempFilePaths[i],
									name: 'file',
									header: {
										Authorization: "Bearer " + getToken(),
									},
									success: (res) => {
										that.adviceFormData.imgList.push(res.data)
									}
								});

							}

						}
					}
				});
			},
			// 查看图片
			lookImg: function(val) {
				const urls = this.adviceFormData.imgList;
				const current = val;
				uni.previewImage({
					urls,
					current
				});
			},
			// 删除图片
			delImg: function(index) {
				let that = this;
				deleteImage(that.adviceFormData.imgList[index]).then(res => {
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					this.adviceFormData.imgList.splice(index, 1);
				})
			},

		},
		onLoad(options) {
			getSelectAdviceById(options.id).then((res) => {
				this.adviceFormData.id = res.data.id
				this.adviceFormData.feedbackId = res.data.feedbackId
				this.adviceFormData.feedbackTitle = res.data.feedbackTitle
				this.adviceFormData.feedbackContent = res.data.feedbackContent
				if (res.data.feedbackPhoto != null) {
					this.adviceFormData.imgList = res.data.feedbackPhoto.split(",")
				}

			})
		},
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		// font-size: 28rpx;
		line-height: inherit;
	}

	/* #endif */

	.title {
		font-weight: bold;
		font-size: 38rpx;
		margin-bottom: 16rpx;
		display: flex;
		padding-bottom: 7px;
		border-bottom: 1px #cfcfcf solid;

	}

	.btn {
		width: 720rpx;
		height: 70rpx;
		background-color: #f7cb50;
		color: #ffffff;
		font-size: 24rpx;
		line-height: 60rpx;
	}

	.example {
		padding: 15rpx;
		background-color: #fff;
	}


	.button-group {
		margin-top: 15rpx;

		display: flex;
		justify-content: space-around;
	}



	.img-box {
		.img {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			margin-left: 20rpx;
			margin-top: 20rpx;

			&:nth-child(3n + 1) {
				margin-left: 0;
			}

			.pic {
				width: 100%;
				height: 100%;
			}

			.close {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}

		.upload {
			border: 1px #b3b3b3 solid;
			background-color: #f6f6f6;

			.add-pic {
				// width: 100rpx;
				// height: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
